import React, {PureComponent} from 'react';
import {StyleSheet, ScrollView, View, Text, TextInput, TouchableOpacity} from 'react-native';
import CommonStyles from '../commonStyles';

export default class extends PureComponent {
    //初始值
    state = {
        cash: ''
    };

    submit = () => {
        const {submit} = this.props;
        const {cash} = this.state;
        submit(cash);
    };

    render() {
        const {cash} = this.state;
        const {userInfo, isFetching, can_withdraw_cash} = this.props;
        return (
            <View>
                <View style={CommonStyles.list}>
                    <View style={CommonStyles.item}>
                        <Text style={CommonStyles.label}>支付宝</Text>
                        <Text style={styles.val}>{userInfo.alipay_count}</Text>
                    </View>
                    <View style={CommonStyles.item}>
                        <Text style={CommonStyles.label}>真实姓名</Text>
                        <Text style={styles.val}>{userInfo.realname}</Text>
                    </View>
                    <View style={CommonStyles.item}>
                        <Text style={CommonStyles.label}>提现金额</Text>
                        <TextInput
                            returnKeyType="done"
                            clearButtonMode="always"
                            underlineColorAndroid="transparent"
                            style={[CommonStyles.input]}
                            placeholder="请输入提现金额"
                            keyboardType="numeric"
                            onChangeText={text => this.setState({
                                cash: text.trim()
                            })}
                            value={cash}
                            maxLength={32}
                        />
                    </View>
                    <View style={[CommonStyles.item, styles.bottomWrap]}>
                        <View style={{flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center'}}>
                            <Text style={[CommonStyles.label, styles.bottomText, {fontSize: 10}]}>可提现金额</Text>
                            <Text style={[styles.bottomText, {fontSize: 10}]}>￥{can_withdraw_cash}</Text>
                        </View>
                        <Text style={[styles.bottomText, {fontSize: 10}]}>最低提现金额为1元</Text>
                    </View>
                </View>
                <TouchableOpacity onPress={this.submit} disabled={isFetching}>
                    <View style={styles.btnWrap}>
                        <Text style={styles.btnText}>提交申请</Text>
                    </View>
                </TouchableOpacity>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    bottomWrap: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        borderBottomWidth: 0
    },
    bottomText: {
        color: '#969696'
    },
    btnWrap: {
        backgroundColor: '#f42f19',
        borderRadius: 18,
        margin: 36
    },
    btnText: {
        fontSize: 15,
        width: '100%',
        height: 36,
        lineHeight: 36,
        textAlign: 'center',
        color: '#fff'
    }
});
